import React from 'react'

// Passing variables to components is called passing "props"

// Consuming props in class definition
export class HelloWorld1 extends React.Component {
  render() {
    const {name} = this.props
    return <p>Hello {name}</p>
  }
}

// Consuming props in function definition
export const HelloWorld2 = ({name}) =>
  <p>Hello {name}</p>


// Passing props to children
export default () =>
  <div>
    <HelloWorld1 name='John'/>
    <HelloWorld2 name='Smith'/>
  </div>
